<template>
  <view class="meun-container">
    <view
      :class="[{ 'meun-active': index == selectIndex }, 'meun-item']"
      v-for="(item, index) in meunList"
      :key="index"
      @click="selectAction(index)"
    >
      <text>{{ item }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0,
      meunList: ["综合", "销量", "价格"],
    }
  },

  emit: ["change"],

  methods: {
    selectAction(index) {
      this.selectIndex = index
      this.$emit("change", index)
    },
  },
}
</script>

<style lang="scss" scoped>
.meun-container {
  display: flex;
  .meun-item {
    flex: 1;
    font-size: 28rpx;
    line-height: 80rpx;
    text-align: center;
  }
}

.meun-active {
  border-bottom: 5rpx solid #c00000;
}
</style>
